<template>
  <div class="app" :class="{ 'dark-theme': isDarkMode }">
    <!-- 顶部导航栏 -->
    <nav class="navbar">
      <div class="nav-left">
        <img src="https://s3.amazonaws.com/knowt.com/images/knowt-logo-mobile.png" alt="Logo" class="logo">
        <router-link to="/" class="nav-link">Home</router-link>
        <router-link to="/explore" class="nav-link">Explore</router-link>
        <router-link to="/exams" class="nav-link">Exams</router-link>
        <div class="search-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" style="opacity:0.5;top: 7px; opacity: 0.5; position: relative;"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
          <input type="search" placeholder="Search for anything" class="search-input">
        </div>
      </div>
      <div class="nav-right">
        <div class="create-button-wrapper">
          <button class="icon-btn" @mouseenter="toggleCreateMenu">
            <PlusIcon />
          </button>
          <CreateMenu 
            :is-open="isCreateMenuOpen"
            @select="handleCreateMenuSelect"
          />
        </div>
        <div class="streak ">🔥 1</div>
        <div class="points">🏆 0</div>
        <div class="coins">🪙 0</div>
        <button class="notification-btn">
          <BellIcon />
        </button>
        <div class="user-avatar">yu</div>
        <button class="upgrade-btn">Upgrade</button>
      </div>
    </nav>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PlusIcon from '@/components/icons/PlusIcon.vue'
import BellIcon from '@/components/icons/BellIcon.vue'
import CreateMenu from '@/components/CreateMenu.vue'

const isDarkMode = ref(true)
const isCreateMenuOpen = ref(false)

const toggleCreateMenu = () => {
  isCreateMenuOpen.value = true
}

const handleCreateMenuSelect = (item: any) => {
  console.log('Selected:', item)
  isCreateMenuOpen.value = false
}

// 点击外部关闭菜单
onMounted(() => {
  document.addEventListener('click', (e) => {
    const target = e.target as HTMLElement
    if (!target.closest('.create-button-wrapper')) {
      isCreateMenuOpen.value = false
    }
  })
})
</script>

<style>
.app {
  background-color: #1a1a1a;
  color: #ffffff;
  min-height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #2a2a2a;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  color: white;
  text-decoration: none;
}

.search-container {
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 2px 20px;
}

.search-input {
  border: none;
  background-color: #1a1a1a;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  color: white;
  width: 300px;
  outline: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-btn, .notification-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  
}

.upgrade-btn {
  background-color: #ffd700;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  background-color: #6c5ce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 24px;
  width: auto;
}

.icon-btn img, 
.notification-btn img {
  width: 20px;
  height: 20px;
}

.create-button-wrapper {
  position: relative;
}

.icon-btn {
  position: relative;
  padding: 10px; 
  z-index: 1001;
}
.router-link-active {
  color: rgb(80, 210, 194);
}
</style>
